<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO, AMAP!</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: '56d60b1693f885f4d649d95e61287c85',
        }
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        window.onload = function () {
          if (window.wuliu) {
            window.wuliu.getLocation()
          }
        }
        let map

        function onLocation(lng, lat) {
          map.setCenter([lng, lat])
          AMap.plugin(['AMap.PlaceSearch'], function () {
            //构造地点查询类
            var placeSearch = new AMap.PlaceSearch({
              citylimit: true, //是否强制限制在设置的城市内搜索
              map: map, // 展现结果的地图实例
              autoFitView: false, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            })

            var cpoint = [lng, lat] //中心点坐标
            placeSearch.searchNearBy('', cpoint, 200, function (status, result) {
              //创建一个 Marker 实例：
              window.wuliu.getListBack(JSON.stringify(result))
            })
          })
        }

        function searchLocation(name) {
          AMap.plugin(['AMap.PlaceSearch'], function () {
            //构造地点查询类
            var placeSearch = new AMap.PlaceSearch({
              citylimit: true, //是否强制限制在设置的城市内搜索
              map: map, // 展现结果的地图实例
              autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            })
            //关键字查询
            placeSearch.search(name, function (status, result) {
              //查询成功时，result 即对应匹配的 POI 信息
              window.wuliu.getSearchListBack(JSON.stringify(result))
            })
          })
        }

        AMapLoader.load({
          key: '2049e83083aa01c9148d1b2c89025933', //申请好的Web端开发者key，调用 load 时必填
          version: '1.4.15', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
            //JS API 加载完成后获取AMap对象
            map = new AMap.Map('container', {
              viewMode: '2D', //默认使用 2D 模式
              zoom: 15, //地图级别
              center: [116.397428, 39.90923], //地图中心点
            })
          })
          .catch((e) => {
            console.error(e) //加载错误提示
          })
    </script>
</head>
<body>
<div id="container"></div>
</body>
</html>
